<template>
    <div class="login-container">
        <t-card title="后台管理系统登录" style="width: 400px; margin: 100px auto;">
            <t-form :model="form">
                <t-form-item label="用户名">
                    <t-input v-model="form.username" placeholder="请输入用户名" />
                </t-form-item>

                <t-form-item label="密码">
                    <t-input type="password" v-model="form.password" placeholder="请输入密码" />
                </t-form-item>

                <t-form-item>
                    <t-button theme="primary" block @click="handleLogin">登录</t-button>
                </t-form-item>
            </t-form>
        </t-card>
    </div>
</template>

<script setup>
    import { reactive } from 'vue'
    import { useRouter } from 'vue-router'

    const router = useRouter()

    const form = reactive({
        username: '',
        password: ''
    })

    const handleLogin = () => {
        // 暂不验证用户名密码
        localStorage.setItem('isLoggedIn', 'true')
        router.push('/')  // 登录后跳转后台首页
    }
</script>


<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        background-color: #f5f5f5;
        padding-top: 100px;
    }
</style>
